<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-写作突破-亮点单词/短语'"> </Breadcrumb>
        <view class="content">
          <WordLook2
            v-if="type === 'look'"
            :wordList="wordList"
            @changeType="changeType"
          ></WordLook2>
          <WordListen2
            v-if="type === 'listen'"
            :wordList="wordList"
            @showPopup="showPopup"
          ></WordListen2>
        </view>
      </view>
    </view>
    <u-mask :show="isShowPopup" :zoom="false">
      <view class="popup_container">
        <view class="popup_img">
          <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/laugh.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="popup_title">本次强化已结束</view>
        <view class="popup_button">
          <view class="popup_button_content" @click="strengthenAgain()">
            <text>再次强化</text>
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/start_arrow.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="popup_button_content" @click="handleBack()">
            <text>返回生词本</text>
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/start_arrow.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
      </view>
    </u-mask>
  </view>
</template>

<script>
import { getRandowNewWordList } from "@/api/composition";
export default {
  components: {},
  data() {
    return {
      id: "",
      wordList: [],
      type: "",
      isShowPopup: false,
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.init();
  },
  methods: {
    init() {
      let params = {
        typeId: this.id,
      };
      getRandowNewWordList(params).then((res) => {
        this.wordList = res.data;
        this.changeType("look");
      });
    },
    changeType(type) {
      this.type = type;
    },
    showPopup() {
      this.isShowPopup = true;
    },
    strengthenAgain() {
      this.init();
      this.isShowPopup = false;
    },
    handleBack() {
      uni.navigateTo({
        url: "/pages/composition/compositionPhrase",
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./compositionPhraseStrengthen.scss";
</style>
